<template>
	<div class="adminMsg_Container">
		<x-header :left-options="{showBack: false}" title="管理员详情" class="header vux-1px-b">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="admin_head">
			<div class="admin_portrait"></div>
			<span class="admin_name">木槿花下风</span>
			<span class="admin_msgs">已进行实名认证 请审核管理员</span>
			<span class="state">待审核</span>
			<router-view></router-view>
		</div>
		<div class="real_msg">
			<ul>
				<li class="real">
					<span class="">真实姓名</span>
					<span>刘晓帅</span>
				</li>
				<li class="real">
					<span>手机号码</span>
					<span>17638166316</span>
				</li>
				<li class="real">
					<span>联系地址</span>
					<span>河南省郑州市古玩城4楼展销厅</span>
				</li>
			</ul>
		</div>
		<!--身份证-->
		<div class="card">
			<div class="id_card">
				<span>身份证号</span>
				<span>410255200006084231</span>
			</div>
			<div class="cardImg">
				<div class="positive comon"></div>
				<div class="reverse comon"></div>
			</div>
		</div>
		<center><button class="oneAudit btn">初次审核</button></center>
		<center><button class="RefusedAudit btn">拒绝审核</button></center>

	</div>
</template>

<script>
	import $ from "jquery"
	import { XHeader } from 'vux'
	export default {
		name: "adminMsg",
		data() {
			return {
				img1: '',
				img2: '',
				iconShow1: true,
				iconShow2: true,
				admin_id: ''
			}
		},
		components: {
			XHeader
		},
		mounted() {
			this.getAdminDetail();
		},
		methods: {
			getAdminDetail: function() {
				this.admin_id = this.$route.params.admin_id;
				this.$http({
					method: 'GET',
					url: '/los/api/seller/admin_info.json?admin_id=' + this.admin_id,
					data: ''
				}).then((result) => {
					this.$http({
						method: 'GET',
						url: '/los/api/seller/identity.json?member_id=' + result.data.shop_admin.member_id,
						data: ''
					}).then((rst) => {
						
					}).catch((err) => {
						console.log(err);
					})
				}).catch((err) => {

				})
			},
			back() {
				window.history.go(-1);
			},
			//上传图片
			changeImage(e) {
				this.iconShow1 = !this.iconShow1;
				var file = e.target.files[0];
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					this.img1 = e.target.result;
					$('.image').attr('src', this.img1);
				}
				//				console.log(reader);
				//				console.log(file);
			},
			changeImage2(e) {
				this.iconShow2 = !this.iconShow2;
				var file = e.target.files[0]; //得到的是第一张input选择的图片的一些参数
				var reader = new FileReader(); //创建FileReader对象
				reader.readAsDataURL(file); //将文件读取为 DataURL
				reader.onload = function(e) {
					this.img2 = e.target.result; //此处获得的data是base64格式的数据
					$('.image2').attr('src', this.img2);
				}

			}
		}
	}
</script>

<style lang="less">
	html {
		height: 100%;
		background: #e0e0e0;
	}
	
	.adminMsg_Container {
		/*border:1px solid;*/
		position: relative;
		.header {
			/*height: 44px;*/
			/*width: 100%;*/
			/*border-bottom: 1px solid #e6e6e6;*/
			background: white;
			.icon-black-back {
				width: 1rem;
				height: 2rem;
				background-size: 50%;
				background-repeat: no-repeat;
			}
		}
		/*
		 管理员头像区域
		 * */
		.admin_head {
			background: white;
			height: 1.86rem;
			/*border: 1px solid;*/
			font-size: 0;
			margin-top: 0.26rem;
			position: relative;
			.admin_portrait {
				border-radius: 0.1rem;
				width: 1.33rem;
				height: 1.33rem;
				border: 1px solid;
				margin-left: 0.26rem;
				margin-top: 0.26rem;
				position: absolute;
			}
			.admin_name {
				font-size: 0.4rem;
				color: #333333;
				position: absolute;
				left: 1.86rem;
				top: 0.3rem;
			}
			.admin_msgs {
				font-size: 0.26rem;
				color: #AAAAAA;
				position: absolute;
				left: 1.86rem;
				bottom: 0.32rem;
			}
			.state {
				color: #a30000;
				font-size: 0.37rem;
				position: absolute;
				right: 0.4rem;
				top: 40%;
			}
		}
		/*
		 * 管理员信息栏
		 */
		.real_msg {
			ul {
				margin-top: 0.26rem;
				background: white;
				padding: 0 0.26rem;
			}
			.real {
				height: 1.3rem;
				line-height: 1.3rem;
				position: relative;
				span {
					display: inline-block;
					font-size: 0.37rem;
					color: #333;
				}
				span:nth-child(1) {
					float: left;
					margin-left: 0.26rem;
				}
				span:nth-child(2) {
					float: right;
					margin-right: 0.26rem;
				}
			}
			.real:last-child:after {
				border: none;
			}
			.real:after {
				content: " ";
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				height: 1px;
				border-bottom: 1px solid #e6e6e6;
				color: #e6e6e6;
				transform-origin: 0 0;
				transform: scaleY(0.5);
			}
		}
		/*身份证信息*/
		.card {
			background: white;
			margin-top: 0.26rem;
			/*border: 1px solid;*/
			overflow: hidden;
			.id_card {
				height: 1.3rem;
				line-height: 1.3rem;
				span:nth-child(1) {
					float: left;
					display: inline-block;
					margin-left: 0.26rem;
					font-size: 0.37rem;
				}
				span:nth-child(2) {
					float: right;
					display: inline-block;
					margin-right: 0.26rem;
					font-size: 0.37rem;
				}
			}
			.cardImg {
				/*身份证公共样式*/
				.comon {
					height: 2.4rem;
					width: 4.2rem;
					position: relative;
					margin-bottom: 1rem;
					border-radius: 5px;
					background: url('../assets/images/home/icon_id_font.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
				/*加号公共样式*/
				.icon-add {
					position: absolute;
					display: inline-block;
					width: 0.6rem;
					height: 0.62rem;
					background-size: 100%;
					background-repeat: no-repeat;
					left: 50%;
					margin-left: -0.3rem;
					top: 50%;
					margin-top: -0.31rem;
					z-index: 9999;
				}
				/*图片上传公共样式*/
				.file {
					width: 2rem;
					float: left;
					display: block;
					opacity: 0;
				}
				/*上传图片样式*/
				.image,
				.image2 {
					position: absolute;
					height: 100%;
					/*border: 1px solid;*/
					width: 100%;
				}
				.positive {
					float: left;
					margin-left: 0.26rem;
				}
				.reverse {
					float: right;
					margin-right: 0.26rem;
				}
			}
		}
		.btn {
			width: 9.04rem;
			margin: 0 auto;
			height: 1.17rem;
			border: none;
			color: white;
			border-radius: 4px;
			outline: none;
			font-size: 0.4rem;
		}
		.oneAudit {
			margin-top: 1rem;
			background: #1874da;
		}
		.RefusedAudit {
			margin-top: 0.6rem;
			color: #1874da;
			background: #f3f3f3;
			border: solid 1px #1874da;
		}
	}
</style>